<template>
  <div class="wrapper">
    <!-- 头部导航 -->
    <div class="nav">
      <div class="nav-left">
        <div class="date">{{ date }}</div>
        <div class="username">{{ userInfo.nickName }}</div>
      </div>
      <div class="nav-right" @click="SearchView">
        <van-search
          shape="round"
          v-model="value"
          placeholder="请输入搜索关键词"
        />
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="swipe-home">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerList" @click="viewDetail(item.pid,item.type)" :key="index">
          <img class="auto" :src="item.bannerImg" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 热歌推荐text -->
    <div class="hot">
      <div class="hottext">热卖推荐</div>
    </div>

    <!-- 热卖推荐商品 -->
    <div class="productbox">
      <div class="hotproduct" v-for="(item, index) in HotProduct" @click="viewDetail(item.pid,item.type)" :key="index">
        <div class="productimg">
          <span class="pdtitle">hot</span
          ><img :src="item.smallImg" alt="" width="150px" height="150px" />
        </div>
        <div class="producttext">
          <div class="pdname">{{ item.name }}</div>
          <div class="pdenname">{{ item.enname }}</div>
          <div class="pdprice">￥{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      userInfo: [],
      date: "",
      value: "",
      //存放轮播图数据
      bannerList: [],
      //存放热门推荐数据
      HotProduct: [],
    };
  },
  created() {
    this.getHotProduct();
    this.getBanner();
    this.gettime();
    this.findMy();
  },
  methods: {
    //查询我的
    findMy() {
      let tokenString = this.$cookies.get("TOKEN");
      this.axios({
        method: "get",
        url: "/findMy",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          tokenString,
        },
      }).then((res) => {
        // res.data.result[0].new = require("../assets/22-20-10-010.jpg")
        this.userInfo = res.data.result[0];
        console.log(this.userInfo);
        this.url = res.data.result[0].userBg;
        this.logourl = res.data.result[0].userImg;
        console.log("1230", res);
      });
    },
    //点击跳转商品详情
    viewDetail(pid, type) {
      this.$router.push({ name: "Detail", query: { pid, type } });
    },
    //点击跳转搜索页
    SearchView() {
      this.$router.push({ name: "Search" });
    },
    //获取时间
    gettime() {
      let dt = new Date();
      let hours = dt.getHours();
      if (hours >= 6) {
        this.date = "早上好";
      }
      if (hours >= 10) {
        this.date = "中午好";
      }
      if (hours >= 14) {
        this.date = "下午好";
      }
      if (hours >= 19) {
        this.date = "晚上好";
      }
    },
    //获取轮播图数据
    getBanner() {
      this.axios({
        method: "get",
        url: "/banner",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        },
      }).then((res) => {
        this.bannerList = res.data.result;
      });
    },
    //获取热门推荐数据
    getHotProduct() {
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          key: "isHot",
          value: 1,
        },
      }).then((res) => {
        this.HotProduct = res.data.result;
        console.log(res);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.pdprice {
  color: #001bb2;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}
.pdtitle {
  text-align: center;
  margin-left: 5px;
  position: absolute;
  width: 25px;
  height: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: white;
  font-size: 14px;
  background-color: blue;
}
.wrapper {
  height: 100vh;
  overflow-y: scroll;
  padding-bottom: 100px;
}
::-webkit-scrollbar {
  display: none;
}
.producttext {
  // text-align: center;
  margin-top: -5px;
  margin-left: 10px;
  .pdname {
    font-size: 18px;
  }
  .pdenname {
    margin-top: 3px;
    color: #b39b9d;
  }
}
.productimg {
  position: relative;
  // margin-top: 10px;
  // display: flex;
  margin: 10px;
}
.hotproduct {
  width: 47%;
  height: 250px;
  background-color: #fff;
  margin-left: 2%;
  margin-bottom: 10px;
}
.productbox {
  display: flex;
  flex-wrap: wrap;
}
.hot {
  display: flex;
  margin: 5px;
  height: 50px;
  background-color: white;
  .hottext {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    background-color: blue;
    width: 100px;
    height: 30px;
    font-size: 16px;
    color: #fff;
    border-top-right-radius: 20px;
    margin-top: 10px;
    // margin-bottom:40px;
  }
}
/deep/.van-swipe__indicator {
  height: 3px;
  border-radius: 0;
  width: 15px;
}
/deep/.van-swipe__indicators {
  left: 85%;
}
.swipe-home {
  margin: 5px;
  border-radius: 10px;
  overflow: hidden;
}
// .my-swipe .van-swipe-item {
//   color: #fff;
//   font-size: 20px;
//   line-height: 150px;
//   text-align: center;
//   background-color: #39a9ed;
// }
/deep/.van-icon {
  color: #cb9b73;
}
.nav {
  display: flex;
  align-items: center;
  background-color: #fff;
  .nav-left {
    display: flex;
    width: 100px;
    margin-left: 5px;
    justify-content: space-evenly;
    .date {
      font-size: 14px;
      font-weight: bold;
    }
    .username {
      font-size: 14px;
      font-weight: bold;
      color: #0c34ba;
    }
  }
  .nav-right {
    flex: 1;
  }
}
</style>